<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>异步测试</div>
    <div id="containe"></div>

    <script>
      let containe = document.getElementById("containe");

      for (let i = 0; i < 3; i++) {
        let p = document.createElement("p");

        p.innerText = "这是一段话";

        containe.appendChild(p);
      }

      // 微任务 : DOM 渲染前触发
      Promise.resolve().then(() => {
        console.log("length1", containe.children.length);

        alert("Promise then"); // DOM 渲染了吗 --- No
      });

      // 宏任务 : DOM 渲染后触发
      setTimeout(() => {
        console.log("length2", containe.children.length);

        alert("setTimeout"); // DOM 渲染了吗  --- yes
      });
    </script>
  </body>
</html>
